import React, { Component, Fragment } from 'react';

import { connect } from 'dva';
import { Form, Card, Select, List, Tag, Icon, Tooltip, Row, Col, Button, Input, Modal } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import TopicContent from '@/components/CrowdTopic';
import styles from './CrowdTopic.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Option } = Select;
const FormItem = Form.Item;

@connect(({ crowd, loading }) => ({
  crowd,
  loading: loading.models.crowd,
}))
@Form.create()
class CrowdTopic extends Component {
  state = {
    crowd_id: '', //群ID
    value: '', //动态内容关键字
    visible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    stepFormValues: {},
    updateModalVisible: false,
  };

  //初始化页面数据
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'crowd/fetchTopicList',
      payload: {
        pagesize: 5,
      },
    });
  }

  //搜索
  handleSubmit = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      this.setState({ crowd_id: values.crowd_id, value: values.title });
      this.state.value = values.title;
      if (!err) {
        dispatch({
          type: 'crowd/fetchTopicList',
          payload: {
            crowd_id: values.crowd_id,
            title: values.title,
            pagesize: 5,
          },
        });
      }
    });
  };

  //重置
  Reset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({ crowd_id: '', value: '' });
    dispatch({
      type: 'crowd/fetchTopicList',
      payload: {
        pagesize: 5,
        page: 1,
      },
    });
  };

  //删除
  showConfirm = payload => {
    const { dispatch } = this.props;
    Modal.confirm({
      title: '删除文章',
      content: '确定删除该文章吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'crowd/DeleteTopic',
          payload: {
            id: payload.id,
          },
        });
      },
    });
  };

  render() {
    const {
      form,
      crowd: { list, data, pagination },
      loading,
    } = this.props;
    const { dispatch } = this.props;
    const { getFieldDecorator } = form;
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
      },
    };

    return (
      <PageHeaderWrapper title="动态管理" onTabchange={() => this.Reset}>
        <Fragment>
          <Card bordered={false}>
            <Form onSubmit={this.handleSubmit} layout="inline">
              <StandardFormRow title="选项" grid last>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem {...formItemLayout} label="群列表">
                      {getFieldDecorator('crowd_id', {
                        onChange: this.handleSelectChange,
                      })(
                        <Select placeholder="请选择" style={{ maxWidth: 300, width: '100%' }}>
                          {data.map(function(item) {
                            return (
                              <Option key={item.id} value={item.id}>
                                {item.name}
                              </Option>
                            );
                          })}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem label="动态内容">
                      {getFieldDecorator('title', {
                        onChange: this.inputdata,
                      })(<Input placeholder="请输入动态内容关键字" />)}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem wrapperCol={{ span: 8, offset: 4 }}>
                      <Button type="primary" icon="search" htmlType="submit">
                        搜索
                      </Button>
                      <Button onClick={this.Reset} type="dashed">
                        重置
                      </Button>
                    </FormItem>
                  </Col>
                </Row>
              </StandardFormRow>
            </Form>
          </Card>
          <Card
            style={{ marginTop: 24 }}
            bordered={false}
            bodyStyle={{ padding: '8px 32px 32px 32px' }}
          >
            <List
              size="large"
              loading={list.length === 0 ? loading : false}
              rowKey="id"
              itemLayout="vertical"
              // loadMore={loadMore}
              pagination={{
                onChange: (page, pageNumber) => {
                  dispatch({
                    type: 'crowd/fetchTopicList',
                    payload: {
                      page: page,
                      pagesize: pageNumber,
                      crowd_id: this.state.crowd_id,
                      title: this.state.value,
                    },
                  });
                },
                onShowSizeChange: (current, size) => {
                  dispatch({
                    type: 'crowd/fetchTopicList',
                    payload: {
                      page: current,
                      pagesize: size,
                      crowd_id: this.state.crowd_id,
                      title: this.state.value,
                    },
                  });
                },
                showQuickJumper: true,
                showSizeChanger: true,
                current: pagination.current ? pagination.current : 1,
                pageSize: pagination.pagesize ? pagination.pagesize : 5,
                total: pagination.total ? pagination.total : 0,
              }}
              dataSource={list}
              renderItem={item => (
                <List.Item
                  key={item.id}
                  actions={[
                    //分享，点赞，评论数量
                    <IconText type="like-o" text={item.useful} />,
                    <IconText type="message" text={item.comment} />,
                  ]}
                  extra={
                    <div className={styles.particulars}>
                      <a onClick={() => this.showConfirm(item)}>
                        <Icon type="delete" theme="twoTone" /> 删除
                      </a>
                    </div>
                  }
                >
                  <List.Item.Meta />
                  <TopicContent data={item} />
                </List.Item>
              )}
            />
          </Card>
        </Fragment>
      </PageHeaderWrapper>
    );
  }
}

export default CrowdTopic;
